import React, { useState, useEffect, FC } from 'react'
import { useHistory } from 'react-router-dom'
import { Menu, Dropdown, Layout , Modal ,Input ,Form } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import Breadcrumb from '@/components/common/breadcrumb'
import { connect } from 'react-redux'
import * as actions from '@/store/actions'
import style from './Header.module.less'
import {formItemLayout,modalLayoutSm} from '@/config/layout';
import { store } from '@/store'
import CommonApi from '@/api/common'
import { ConfigProvider } from 'antd'
import themePng from '@/assets/img/theme.png'
interface Props extends ReduxProps {}

const Header: FC<Props> = ({
  storeData: { theme, userInfo },
  setStoreData
}) => {
  const history = useHistory()
  const { userName = '-' } = userInfo
  const firstWord = userName.slice(0, 1)
  const [collapsed, setCollapsed] = useState(false)
  const [pwdMdal,setPwdModal] = useState(false);

  const [form] = Form.useForm()
  const { setFieldsValue } = form
  const logout = async () => {
    await setStoreData('SET_USERINFO', {})
    history.replace({ pathname: '/login' })
  }
  const changeTheme = (themes: string) => {
    setStoreData('SET_THEME', themes)
  }
  const changePwd = ()=>{
    setFieldsValue({
      oldpwd:'',
      newPwd:''
    })
    setPwdModal(true);
  }
  const menu = (
    <Menu>
      <Menu.Item onClick={changePwd}>
        <span>修改密码</span>
      </Menu.Item>
      <Menu.Item onClick={logout}>
        <span>退出登录</span>
      </Menu.Item>
    </Menu>
  )

  const changeMenu = (
    <Menu selectedKeys={[theme]}>
      <Menu.Item key="default" onClick={() => changeTheme('default')}>
        <span>亮白主题</span>
      </Menu.Item>
      {/* <Menu.Item key="fresh" onClick={() => changeTheme('fresh')}>
        <span>清新主题</span>
      </Menu.Item> */}
      <Menu.Item key={'dark'}  onClick={() => changeTheme('dark')}>
        <span>暗黑主题</span>
      </Menu.Item>
     
    </Menu>
  )

  const toggle = (): void => {
    setCollapsed(!collapsed)
    setStoreData('SET_COLLAPSED', !collapsed)
  }
  useEffect(()=>{
    window['logouFn']= logout;
  },[])
  // 更换主题
  useEffect(() => {
    const themeStyle = document.getElementById('less:color')
    if (themeStyle) themeStyle.remove()
    localStorage.removeItem('themeStyle')
    let css = document.createElement('link') 
    css.id = 'less:color'
    css.rel = 'stylesheet'
    switch(theme){
      case 'default':// 亮白主题
        css.href = 'theme2.css'
        document.body.append(css)
        break;
      // case 'fresh':// 清新主题
      //   css.href = 'theme2.css'
      //   document.body.append(css)
      //   break;
      case 'dark'://暗黑
        css.href = 'theme3.css'
        document.body.append(css)
        break;
      default:
        
        break;
    }
  }, [theme])
  const handleCancel = ()=>{
    setFieldsValue({
      oldpwd:'',
      newPwd:''
    })
    setPwdModal(false);

  }
  const handleOk = ()=>{
    form.validateFields().then((vals) => {
      const { id = '' } = store.getState().storeData['userInfo']['userData'] || '';
      let params = {
        ...vals,
        ...{
          staffId:id
        }
      }
      CommonApi.editPwd(params).then(()=>{
        setPwdModal(false);
        logout();
      })
    })
  }
  return (
    <Layout.Header className={style.header}>
      <div className={style.toggleMenu} onClick={toggle} style={{visibility:'hidden',padding:'0 5px'}}>
        {collapsed ? (
          <MenuUnfoldOutlined className={style.trigger} />
        ) : (
          <MenuFoldOutlined className={style.trigger} />
        )}
      </div>
      <Breadcrumb/>
      <Dropdown className={`fr ${style.content}`} overlay={menu}>
        <span className={style.user}>
          <span className="avart">{firstWord}</span>
          <span>{userName}</span>
        </span>
      </Dropdown>
      <Dropdown overlay={changeMenu}>
        <div title="更换主题" className="fr webTheme">
        </div>
      </Dropdown>
      <Modal
         title="修改密码" 
         visible={pwdMdal} 
         onOk={handleOk} 
         onCancel={handleCancel}
         width={650}
      >
        <Form form={form} {...modalLayoutSm}>
          <Form.Item
            name="oldpwd"
            label="旧密码"
            rules={[
              {
                required: true,
                message: '请输入旧密码'
              }
            ]}
          > 
            <Input type="password"/>
          </Form.Item>
          <Form.Item
            name="newPwd"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码'
              }
            ]}
          > 
            <Input type="password"/>
          </Form.Item>
        </Form>
      </Modal>
    </Layout.Header>
  )
}
export default connect(
  (state) => state,
  actions
)(Header)

